<template>
  <ul class="vis-tabs">
    <li
      class="tab-item"
      :class="{ active: currentTab === tab.value }"
      v-for="tab in data"
      :key="tab.value"
      @click="handleTabChange(tab)"
    >
      <span>{{ tab.label }}</span>
    </li>
  </ul>
</template>

<script lang="ts">
import { PropType } from 'vue'
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'

interface DataItem {
  label: string
  value: number | string
}

@Component({
  name: 'VisTabs'
})
export default class VisTabs extends Vue {
  /**
   * tabs
   */
  @Prop({
    type: Array as PropType<DataItem[]>,
    default: () => []
  })
  data!: DataItem[]

  /**
   * default-active
   */
  @Prop({
    type: String
  })
  defaultActive!: string

  @Watch('defaultActive')
  handleChange(newVal: string) {
    this.currentTab = newVal
  }

  currentTab: string | number = ''

  initCurrentTab() {
    try {
      this.currentTab = this.$props.data[0].value
    } catch (e) {
      console.log(e)
    }
  }

  handleTabChange({ value }: DataItem) {
    this.currentTab = value
    /** Triggered when tab is changed
     * @event click
     * @type {Event}
     */
    this.$emit('change', value)
  }

  created() {
    this.initCurrentTab()
  }
}
</script>
<style lang="scss" scoped>
.vis-tabs {
  display: flex;
  white-space: nowrap;

  .tab-item {
    position: relative;
    padding: 0 0.15rem;
    color: $color-primary;
    cursor: pointer;
    transition: all 0.3s;

    &.active {
      color: $color-white;
    }

    &:not(:last-child) {
      &::after {
        position: absolute;
        top: 50%;
        right: 0;
        width: 1px;
        height: 0.1rem;
        min-height: 10px;
        background-color: $color-primary;
        content: '';
        transform: translateY(-50%);
      }
    }
  }
}
</style>
